<template>
	<div class="user">
		<div class="header">
			<div class="user-header">
				<p><img src="../../assets/img/null.fcc19d3e.png" /></p>
				<p><router-link to="/order">{{name}}</router-link></p>
				<p>
					<span>新用户注册送388元大礼包</span>
				</p>
			</div>
			<div class="header-center">
				<p>
					<img src="../../assets/img/card3.a090db77.png" />
				</p>	
				
				<p>
					<img src="../../assets/img/1614671448870.png" />
				</p>
				<p><span>游侠风户外会员</span></p>
				<p><span>全站200+户外路线免费畅玩</span></p>
				<p><span>立即开通<img src="../../assets/img/card5.35964a91.png" /></span> </p>
			</div>
		</div>
		<BottonNav :propsurl='arr'></BottonNav>
		<Userone :userlist_two='userlist_two'></Userone>
		<Usertwo></Usertwo>
		<Userthree :userlist_three='userlist_three'></Userthree>
		<Userfour :userfour='userlist_four'></Userfour>
	</div>
</template>

<script>
import BottonNav from '../default/BottonNav.vue'
import Userone from './page/Userone.vue'
import Usertwo from './page/Usertwo.vue'
import Userthree from './page/Userthree.vue'
import Userfour from './page/Userfour.vue'
import Cookies from 'js-cookie';

export default{
	name:'User',
	components:{
		BottonNav,
		Userone,
		Usertwo,
		Userthree,
		Userfour,
	},
	data(){
		return{
			arr:[require('@/assets/img/img22.98e00f94.png'),require('@/assets/img/img22.98e00f94.png'),require('@/assets/img/img33.3d66679c.png')],
			userlist_two:[],
			userlist_three:[],
			userlist_four:[],
			name : '去登录/注册'
		}
	},
	created() {
		let that=this
		this.axios.get('http://localhost:8080/api/dataUser.json').then( (res)=>{
			let data=res.data.msg[0]
			that.userlist_four=data.Userfour
		}).catch((error)=>{
			console.log(error)
		})
		if(Cookies.get('numbers')){
			this.name=Cookies.get('numbers')
		}
	},
	// methods:{
	// 	order(){
	// 		if(Cookies.get('numbers')){
	// 			this.$router.push('/text')
	// 		}else{
	// 			this.$router.push('/text')
	// 		}
	// 	}
	// }
}
</script>

<style>
*{
	margin: 0;
	padding:0 ;
	text-decoration: none;
	list-style-type: none;
}
.user{
	height: 100%;
	background-color: #f5f5f5;
}
.header{
	width: 100%;
	height: 5.7rem;
	background-color: white;
}
.user-header{
	height:5rem;
	margin-bottom: 0.2rem;
	background-image: url(../../assets/img/img17.e30088ce.png);
	background-size: 100% 100%;
}
.user-header p img{
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	margin-left: 0.5rem;
	margin-top: 1rem;
}
.user-header p:nth-child(2){
	position: relative;
	font-size: 0.65rem;
	font-weight: bold;
	margin-left: 2.6rem;
	margin-top: -1.3rem;
}
.user-header p:nth-child(3) span{
	padding: 0.1rem 0.5rem;
	border-radius: 0.5rem;
	margin-left: 2.5rem;
	line-height: 1.2rem;
	color: white;
	background: linear-gradient(to right , #ff7810 , #ff9f29 );
}
.header-center{
	width: 90%;
	height: 1.8rem;
	margin: 0 0.5rem;
	position: relative;
	bottom: 1.7rem;
	background-image:url(../../assets/img/card2.e9ca58c4.png) ;
	background-size: 100% 100%;
}
.header-center p:nth-child(1) img{
	width: 1rem;
	height: 0.5rem;
}
.header-center p:nth-child(2) img{
	width: 1.3rem;
	height: 0.9rem;
	font-size: 0.4rem;
	margin-left: 0.5rem;
	margin-top:-0.1rem;
	padding: 0;
}
.header-center p:nth-child(3) {
	font-size: 0.4rem;
	margin-left: 2.5rem;
	margin-top:-1rem;
	color: #f7f6a0;
}
.header-center p:nth-child(4){
	margin-left: 2.5rem;
	font-size: 0.4rem;
	line-height:1rem;
	color: #f7f6a0;
}
.header-center p:nth-child(5){
	width:65px;
	height: 15px;
	text-align:center;
	margin-left: 7rem;
	margin-top:-1.5rem;
	background: linear-gradient(270deg, #FFE494, #FEF6A2);
	border-radius: 5px;
	}
</style>
